import React, { useState } from 'react';
import { Select } from 'antd';

const SearchInput = (props) => {
  const {
    style,
    placeholder,
    data = [],
    handleSearch,
    handleChange,
    onChange,
    optionValueKey = 'value',
    optionTextKey = 'name',
    ...rest
  } = props;

  const options = data.map(d => (
    <Option key={d[optionValueKey]}>
      {optionTextKey && Array.isArray(optionTextKey) ? optionTextKey.map(item => d[item]).join('-') : d[optionTextKey]}
    </Option>
  ));

  return (
    <Select
      showSearch
      placeholder={placeholder}
      style={style}
      defaultActiveFirstOption={false}
      showArrow={false}
      filterOption={false}
      onSearch={handleSearch}
      onChange={handleChange || onChange}
      {...rest}
    >
      {options}
    </Select>
  );
};

export default SearchInput;
